<template>
  <div>
    <div class="provider-list">
      <div class="header"></div>
      <div class="content content-table">
        <p>
          状态：
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="allShelf"
            >全部</el-button
          >
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="onShelf"
            >上架</el-button
          >
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="downShelf"
            >下架</el-button
          >
        </p>
        <p>
          用户：
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="allUser"
            >全部</el-button
          >
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="ordinaryUser"
            >普通用户</el-button
          >
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="vestUser"
            >马甲用户</el-button
          >
        </p>
        <p>
          时间：
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="allTime"
            >全部</el-button
          >
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="oneDay"
            >1天内</el-button
          >
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="oneWeek"
            >1周内</el-button
          >
          <el-button
            style="min-width: auto"
            link
            type="primary"
            size="small"
            @click="oneMonth"
            >1个月内</el-button
          >
          <el-date-picker
            v-model="state.chooseTime"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="ml20"
            prefix-icon="Calendar"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="changeTime"
          />
        </p>
        <div class="video-list">
          <div
            class="video-item"
            v-for="(item, index) in state.list"
            @click="toDetail(item)"
            :key="index"
          >
            <div class="top">
              <video v-if="item.shipin && item.shipin.length" :src="item.shipin[0].filePath" controls></video>
              <p class="upload-date">更新于{{ item.createTime }}</p>
              <p class="operation">
                <el-button
                  style="min-width: auto"
                  link
                  type="primary"
                  size="small"
                  v-if="item.tuijian"
                  @click.stop="recommend(item.id)"
                  >{{ item.tuijian.code == 1 ? "取消推荐" : "推荐" }}</el-button
                >
                <el-button
                  style="min-width: auto"
                  link
                  type="primary"
                  size="small"
                  v-if="item.shangjia"
                  @click.stop="shelf(item.id)"
                  >{{ item.shangjia.code == 1 ? "下架" : "上架" }}</el-button
                >
              </p>
            </div>
            <div class="bottom">
              <p class="title">{{ item.zhengwenmiaoshu }}</p>
              <div class="avatar-like">
                <div class="avatar">
                  <img v-if="item.touxiang && item.touxiang.length" :src="item.touxiang[0].filePath" alt="">
                  <span>{{ item.nicheng }}</span>
                </div>
                <div class="like">
                  <img class="like-icon" :src="like"/>
                  <span>{{ item.dianzanshuliang }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <h-page
          v-if="state.total"
          v-model:curr-page="state.params.current"
          :size="state.params.size"
          :total="state.total"
          @change="GetList"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetVideoList, RecommendVideo, ShelfVideo } from "@/api/video";
import { baseMsg, elMessageTip, fDate } from "@/utils/utils";
import like from '@/assets/like.png'
const route = useRoute();
const router = useRouter();
const state = reactive({
  params: {
    current: Number(route.query.page) || 1,
    size: Number(route.query.size) || 10,
    shangjia: "",
    xuni: "",
    kaishishijian: "",
    jieshushijian: "",
  },
  list: [],
  option: [],
  // 时间选择器时间
  chooseTime: [],
  total: 0,
});
// 查看上下架状态的全部
const allShelf = () => {
  state.params.shangjia = "";
  GetList();
};
// 查看上架状态
const onShelf = () => {
  state.params.shangjia = 1;
  GetList();
};
// 查看下架状态
const downShelf = () => {
  state.params.shangjia = 0;
  GetList();
};
// 查看所有用户
const allUser = () => {
  state.params.xuni = "";
  GetList();
};
// 查看普通用户
const ordinaryUser = () => {
  state.params.xuni = 0;
  GetList();
};
// 查看马甲用户
const vestUser = () => {
  state.params.xuni = 1;
  GetList();
};
// 查看全部时间内
const allTime = () => {
  state.params.kaishishijian = "";
  state.params.jieshushijian = "";
  GetList();
};
// 查看一天内
const oneDay = () => {
  state.params.kaishishijian = fDate(
    new Date(new Date().getTime() - 1 * 24 * 3600 * 1000)
  );
  state.params.jieshushijian = fDate(new Date(new Date().getTime()));
  GetList();
};
// 查看一周内
const oneWeek = () => {
  state.params.kaishishijian = fDate(
    new Date(new Date().getTime() - 7 * 24 * 3600 * 1000)
  );
  state.params.jieshushijian = fDate(new Date(new Date().getTime()));
  GetList();
};
// 查看一月内
const oneMonth = () => {
  state.params.kaishishijian = fDate(
    new Date(new Date().getTime() - 30 * 24 * 3600 * 1000)
  );
  state.params.jieshushijian = fDate(new Date(new Date().getTime()));
  GetList();
};
const GetList = () => {
  GetVideoList(state.params).then((res) => {
    if (res.code == 4201) {
      state.list = res.data.records;
      state.total = res.data.total;
    }
  });
};
// 推荐和取消推荐
const recommend = (id) => {
  RecommendVideo({ id }).then((res) => {
    if (res.code == 4202) {
      baseMsg("操作成功");
      GetList();
    }
  });
};
// 上架和下架
const shelf = (id) => {
  ShelfVideo({ id }).then((res) => {
    if (res.code == 4202) {
      baseMsg("操作成功");
      GetList();
    }
  });
};
// 时间选择
const changeTime = (value) => {
  if (value) {
    state.params.kaishishijian = value[0];
    state.params.jieshushijian = value[1];
  } else {
    state.params.kaishishijian = "";
    state.params.jieshushijian = "";
  }
  GetList();
};
// 详情
const toDetail = (params) => {
  router.push({
    path: '/shipin/detail',
    query: {
      id: params.id
    }
  })
}
watch(
  () => route.query,
  () => {
    state.params.current = Number(route.query.page) || 1;
    GetList();
  },
  { deep: true }
);
GetList();
</script>
<style lang="scss" scoped>
.header {
  border-bottom: 10px solid #f2f2f2;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  padding: 0 50px;
  padding-bottom: 30px;
  background-color: transparent !important;
}
.video-list {
  display: flex;
  padding: 20px 0px;
  flex-wrap: wrap;
  .video-item {
    width: calc((100% - 120px) / 5);
    border: 1px solid #ccc;
    &:not(:nth-child(5n + 1)) {
      margin-left: 20px;
    }
    &:not(:nth-child(-n + 5)) {
      margin-top: 20px;
    }
    .top {
      position: relative;
      height: 288px;
      padding-top: 20px;
      video {
        height: 240px;
        width: 100%;
      }
      .upload-date {
        position: absolute;
        top: 2px;
        right: 10px;
        font-size: 12px;
        color: #000;
        text-align: right;
      }
      .operation {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
    .bottom {
      font-size: 13px;
      color: #000;
      margin: 10px;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .avatar-like {
        display: flex;
        justify-content: space-between;
        .avatar {
          margin-top: 10px;
          display: flex;
          img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
          }
          span {
            line-height: 25px;
            margin-left: 3px;
            font-size: 12px;
          }
        }
        .like {
          margin-top: 10px;
          display: flex;
          .like-icon {
            width: 25px;
            height: 25px;
          }
          span {
            line-height: 25px;
            margin-left: 3px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.content-table .el-table__header th {
  background-color: #f2f9fc !important;
}
</style>
